<template>
	<view class="points-details">
		<!-- 顶部积分显示 -->
		<view class="header-section">
			<view class="points-info">
				<text class="points-label">我的可用积分</text>
				<text class="points-number">{{points}}</text>
			</view>
			<view class="help-btn" @click="goToPointsPolicy">
				<u-icon name="question-circle" size="20" color="#999"></u-icon>
			</view>
		</view>

		<!-- 交易记录列表 -->
		<view class="transactions-list">
			<!-- 本月 -->
			<view class="month-section" v-if="currentMonthTransactions.length > 0">
				<view class="month-header">
					<text class="month-title">本月</text>
				</view>
				<view class="transaction-item" v-for="(item, index) in currentMonthTransactions" :key="index">
					<view class="transaction-info">
						<text class="transaction-desc">{{item.description}}</text>
						<text class="transaction-date">{{formatDate(item.date)}}</text>
					</view>
					<text class="transaction-points" :class="{'positive': item.points > 0, 'negative': item.points < 0}">
						{{item.points > 0 ? '+' : ''}}{{item.points}}
					</text>
				</view>
			</view>

			<!-- 历史记录 -->
			<view class="month-section" v-if="historyTransactions.length > 0">
				<view class="month-header">
					<text class="month-title">历史记录</text>
				</view>
				<view class="transaction-item" v-for="(item, index) in historyTransactions" :key="index">
					<view class="transaction-info">
						<text class="transaction-desc">{{item.description}}</text>
						<text class="transaction-date">{{formatDate(item.date)}}</text>
					</view>
					<text class="transaction-points" :class="{'positive': item.points > 0, 'negative': item.points < 0}">
						{{item.points > 0 ? '+' : ''}}{{item.points}}
					</text>
				</view>
			</view>

			<!-- 空状态 -->
			<view class="empty-state" v-if="currentMonthTransactions.length === 0 && historyTransactions.length === 0">
				<text class="empty-text">暂无积分记录</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				points: 955,
				currentMonthTransactions: [],
				historyTransactions: []
			}
		},
		onLoad(options) {
			// 从URL参数获取数据
			if (options.transactions) {
				const transactions = JSON.parse(decodeURIComponent(options.transactions));
				this.loadTransactionsFromData(transactions);
			}
			if (options.points) {
				this.points = parseInt(options.points);
			}
		},
		onShow() {
			// 纯静态页面，不需要重新加载
		},
		methods: {
			// 从数据加载交易记录
			loadTransactionsFromData(transactions) {
				// 调试信息
				console.log('加载交易记录:', transactions);
				console.log('交易记录总数:', transactions.length);
				
				// 按月份分组
				this.groupTransactionsByMonth(transactions);
			},
			// 按月份分组交易记录
			groupTransactionsByMonth(transactions) {
				const now = new Date();
				const currentMonth = now.getMonth();
				const currentYear = now.getFullYear();
				
				this.currentMonthTransactions = [];
				this.historyTransactions = [];
				
				transactions.forEach(transaction => {
					const transactionDate = new Date(transaction.date);
					const transactionMonth = transactionDate.getMonth();
					const transactionYear = transactionDate.getFullYear();
					
					if (transactionMonth === currentMonth && transactionYear === currentYear) {
						this.currentMonthTransactions.push(transaction);
					} else {
						this.historyTransactions.push(transaction);
					}
				});
				
				// 按日期排序（最新的在前）
				this.currentMonthTransactions.sort((a, b) => new Date(b.date) - new Date(a.date));
				this.historyTransactions.sort((a, b) => new Date(b.date) - new Date(a.date));
			},
			// 格式化日期
			formatDate(dateString) {
				const date = new Date(dateString);
				const year = date.getFullYear();
				const month = (date.getMonth() + 1).toString().padStart(2, '0');
				const day = date.getDate().toString().padStart(2, '0');
				return `${year}.${month}.${day}`;
			},
			// 跳转到积分规则页面
			goToPointsPolicy() {
				uni.navigateTo({
					url: '/pages/kzPointsCenter/kzPointsPolicy'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.points-details {
		min-height: 100vh;
		background-color: #f5f5f5;
	}

	// 顶部积分显示
	.header-section {
		background-color: #ffffff;
		padding: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1rpx solid #f0f0f0;

		.points-info {
			.points-label {
				font-size: 28rpx;
				color: #333333;
				margin-right: 20rpx;
			}

			.points-number {
				font-size: 48rpx;
				font-weight: bold;
				color: #333333;
			}
		}

		.help-btn {
			width: 40rpx;
			height: 40rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	// 交易记录列表
	.transactions-list {
		.month-section {
			margin-bottom: 20rpx;

			.month-header {
				background-color: #f8f8f8;
				padding: 20rpx 30rpx;

				.month-title {
					font-size: 28rpx;
					color: #666666;
					font-weight: bold;
				}
			}

			.transaction-item {
				background-color: #ffffff;
				padding: 30rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1rpx solid #f0f0f0;

				&:last-child {
					border-bottom: none;
				}

				.transaction-info {
					flex: 1;

					.transaction-desc {
						display: block;
						font-size: 28rpx;
						color: #333333;
						margin-bottom: 8rpx;
					}

					.transaction-date {
						font-size: 24rpx;
						color: #999999;
					}
				}

				.transaction-points {
					font-size: 32rpx;
					font-weight: bold;

					&.positive {
						color: #ff6b35;
					}

					&.negative {
						color: #ff4757;
					}
				}
			}
		}

		// 空状态
		.empty-state {
			background-color: #ffffff;
			padding: 100rpx 30rpx;
			text-align: center;

			.empty-text {
				font-size: 28rpx;
				color: #999999;
			}
		}
	}
</style>
